<script setup lang="ts">
import { ref, reactive, PropType } from 'vue'
import { doGetIcOrderList } from '@/apis/order/sameCityOrder'
import { IcOrderPageParams, PickPageParams, type IcOrder } from '@/apis/order/sameCityOrder/types'
import DoneOrderCard from '@/basePackage/pages/deliveryOrder/components/DoneOrderCard/index.vue'

const props = defineProps({
    status: {
        type: String as PropType<IcOrderPageParams['status']>,
        default: 'PENDING',
    },
})

const IcOrderList = ref<IcOrder[]>([])
const pageConfig = reactive<PickPageParams<'current' | 'size' | 'pages' | 'total'>>({
    current: 1, // 当前页码
    size: 10, // 每页条数
    pages: 0, // 总页数
    total: 0, // 总条数
})
const handleGetIcOrderList = async () => {
    const { data } = await doGetIcOrderList({
        ...pageConfig,
        status: props.status,
    })

    if (data) {
        IcOrderList.value = [...IcOrderList.value, ...data!.records]
        pageConfig.current = data.current
        pageConfig.pages = data.pages
        pageConfig.total = data.total
    }
}
handleGetIcOrderList()

const loadMore = () => {
    if (IcOrderList.value.length >= pageConfig.total) return
    pageConfig.current += 1
    handleGetIcOrderList()
}
defineExpose({
    loadMore,
})
</script>

<template>
    <view v-if="IcOrderList.length" class="done_list_container">
        <template v-for="item in IcOrderList" :key="item.id">
            <DoneOrderCard :orderItem="item"></DoneOrderCard>
            <view class="dot_line"></view>
        </template>
    </view>
    <block v-else>
        <u-empty
            text="暂无订单"
            mode="list"
            src="https://medusa-small-file-1253272780.cos.ap-shanghai.myqcloud.com/s2b2c_2.0.8/2024/11/146735d4e9e4b0dd23f7f6244b.png"
            iconSize="375rpx"
        ></u-empty>
    </block>
</template>

<style lang="scss" scoped>
.done_list_container {
    height: 100%;
    background-color: white;
    border-radius: 12px 12px 0px 0px;
    padding-left: 27rpx;
    padding-right: 27rpx;
    .dot_line {
        border: 1px dashed rgb(153, 153, 153);
        opacity: 0.26;
    }
}
</style>
